<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>编辑案例</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      body {
        background-color: rgb(0, 0, 0, 0.8);
        color: #fff;
        font-size: 18px;
        font-family: "楷体";
      }
      html,body,#app{
        height: 100%;
      }
      #app{
        display: flex;
        justify-content: center;
        align-items: center;
      }
      ul{
        list-style: none;
      }
      fieldset {
        width: 500px;
        height: 250px;
        border-radius: 8px;
      }
      fieldset legend {
        text-align: center;
        font-size: 20px;
        font-weight: 600;
        padding:0 10px;
      }
      ul li {
        margin-top: 15px;
        padding-left: 10px;
      }
      ul li span {
        cursor: pointer;
        font-weight: 600;
        font-size: 20px;
        height: 40px;
        line-height: 40px;
      }
      input {
        background: #0000;
        border: 0;
        outline: none;
        color: #fff;
        height: 30px;
        line-height: 30px;
        font-size: 20px;
        font-family: "楷体";
      }
    </style>
  </head>
  <body>
    <div id="app">
      <fieldset>
        <legend>人物简介</legend>
        <ul>
          <li v-for="(value,key,index)  of userInfo">
            <span>{{key}}</span>:
            <input
              type="text"
              v-model="val"
              @blur="loseFocus(key)"
              v-if="isEdit && index === editIndex"
              ref="ipt"
            />
            <span
              @dblclick="edit(index,value)"
              v-else
              >{{value}}</span
            >
          </li>
        </ul>
      </fieldset>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <script>
      //span标签与input标签通过v-if和v-else切换
      //ref 取到标签 配合this.$nextTick拿到更新后的input
      //@blur  dblclick 进入编辑状态
      //失去焦点退出编辑状态
      const vm = new Vue({
        el: "#app",
        data: {
          userInfo: {
            姓名: "渣渣灰",
            年龄: 18,
            爱好: "玩传奇",
            人生格言: "今天将是余生最年轻的一天",
          },
          //定义编辑状态
          isEdit: false,
          val: "",
          editIndex: "",
        },
        methods: {
          //定义编辑
          edit(index, value) {
            //将index的值赋值给editIndex
            //与上面的索引比较确定当前的input
            this.editIndex = index;
            //修改isEdit的状态
            this.isEdit = true;
            this.val = value;
            //双击时候直接获取焦点
            this.$nextTick(() => {
              this.$refs.ipt[0].focus();
            });
          },
          //失去焦点
          loseFocus(i) {
            //失去焦点后关闭input
            console.log(i);
            this.isEdit = false;
            //给当前的数组赋值修改后的值
            this.userInfo[i] = this.val;
          },
        },
      });
    </script>
  </body>
</html>
